<template>
  <page-header-wrapper>
    <div class="pa10 flex-y-center flex-x-sb">
      <div class="statistic" v-for="(item, index) in statisticLst" :key="'statisticLst' + index">
        <span class="money">{{ item.value }}</span>
        {{ item.title }}
      </div>
      <!-- 总池实时金额 总池累计金额 总池累计支出 待结算金额 
      本月新增收入 本月支出金额 上月支出金额 累计分红人数 -->
    </div>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="分红期数">
                <a-input v-model="queryParam.cycle_no" placeholder="请输入分红期数" allowClear />
              </a-form-item>
            </a-col>
            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="分红池">
                <a-select v-model="queryParam.pool_id" placeholder="请选择分红池" allowClear>
                  <a-select-option v-for="(item, index) in poollist" :key="item.id" :value="+item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :md="8" :sm="24">
              <a-form-item label="来源类型">
                <a-select v-model="queryParam.order_type" placeholder="请选择来源类型" allowClear>
                  <a-select-option :value="1">商品</a-select-option>
                  <a-select-option :value="2">绑卡</a-select-option>
                  <a-select-option :value="3">话费充值</a-select-option>
                  <a-select-option :value="4">广告</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="来源用户">
                <a-input v-model="queryParam.buy_uid" placeholder="请输入用户ID" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单号">
                <a-input v-model="queryParam.order_no" placeholder="请输入订单号" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="更新时间">
                <!-- <a-date-picker @change="dateChange" placeholder="请选择更新时间" allowClear style="width: 100%" /> -->
                <a-range-picker @change="dateChange" placeholder="请选择更新时间" allowClear style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="searchData">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <div class="table-operator flex-y-center flex-x-sb">
        <div class="flex-y-center flex-x-sb">
          <a-radio-group v-model="queryParam.type" @change="typechange" style="margin-right: 15px">
            <a-radio-button :value="''"> 全部 </a-radio-button>
            <a-radio-button :value="1"> 收入 </a-radio-button>
            <a-radio-button :value="2"> 支出 </a-radio-button>
          </a-radio-group>
          <a-radio-group v-model="queryParam.status" @change="statusChange">
            <a-radio-button :value="''"> 全部 </a-radio-button>
            <a-radio-button :value="0"> 待结算 </a-radio-button>
            <a-radio-button :value="1"> 已结算 </a-radio-button>
            <a-radio-button :value="2"> 已退款 </a-radio-button>
          </a-radio-group>
        </div>
        <div>检索结果 {{ totalCount }} 条，共计收入金额 {{ total_money1 }} 元，支出金额 {{ total_money2 }} 元。</div>
      </div>
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
      >
        <template slot="type" slot-scope="text, record">
          {{ record.type == 1 ? '收入' : record.type == 2 ? '支出' : '-' }}
        </template>
        <template slot="cycle_no" slot-scope="text, record">
          {{ record.cycle_no ? record.cycle_no : '-' }}
        </template>
        <template slot="rate" slot-scope="text, record"> {{ record.price }}/{{ record.rate }} </template>
        <template slot="order_type" slot-scope="text, record">
          {{
            record.order_type == 1
              ? '商品'
              : record.order_type == 2
              ? '绑卡'
              : record.order_type == 3
              ? '话费充值'
              : record.order_type == 4
              ? '广告'
              : '-'
          }}
        </template>
        <template slot="order" slot-scope="text, record">
          {{ record.order ? record.order.order_no : '-' }}
        </template>
        <template slot="user" slot-scope="text, record">
          <span v-if="record.user"> {{ record.user.id }}/{{ record.user.nickname }}</span>
          <span v-else>-</span>
        </template>
        <template slot="status" slot-scope="text, record">
          {{ record.status == 0 ? '待结算' : record.status == 1 ? '已结算' : record.status == 2 ? '已退款' : '-' }}
        </template>
        <template slot="updated_at" slot-scope="text, record">
          {{ record.updated_at ? record.updated_at : '-' }}
        </template>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { poolList, poolStatistic, poolLog } from '@/api/plat'

export default {
  name: 'pool-total-list-page',
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '分红池名称',
          dataIndex: 'pool.name',
          width: 120
        },
        // {
        //   title: '期数',
        //   dataIndex: 'cycle_no',
        //   scopedSlots: { customRender: 'cycle_no' },
        // },
        {
          title: '类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
          width: 80
        },
        {
          title: '金额',
          dataIndex: 'money',
          width: 100
        },
        {
          title: '余额',
          dataIndex: 'price',
          width: 100
        },
        // {
        //   title: '计算额/比例',
        //   dataIndex: 'rate',
        //   scopedSlots: { customRender: 'rate' },
        // },
        {
          title: '来源类型',
          dataIndex: 'order_type',
          scopedSlots: { customRender: 'order_type' },
          width: 100
        },
        {
          title: '备注',
          dataIndex: 'desc',
          width: 180
        },
        {
          title: '订单信息',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
        },
        {
          title: '来源用户ID/昵称',
          dataIndex: 'user',
          scopedSlots: { customRender: 'user' },
          width: 150
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          width: 100
        },
        {
          title: '更新时间',
          dataIndex: 'updated_at',
          scopedSlots: { customRender: 'updated_at' },
          width: 180
        },
      ],
      queryParam: {
        pool_id: 1,
        order_type: undefined,
        cycle_no: '',
        order_no: '',
        buy_uid: '',
        date_time: '',
        type: '',
        status: '',
      },
      loading: false,
      dataSource: [],
      totalCount: 0,
      total_money1: 0,
      total_money2: 0,
      pageNo: 1,
      pageSize: 10,

      poollist: [],
      statisticLst: [],
    }
  },
  created() {
    this.getStatisticList() //总池统计
    this.getPoolList() // 分池列表
    this.getList() //总池列表
  },
  methods: {
    async getPoolList() {
      var newObj = {}
      newObj = { pageNo: 1, pageSize: 99999 }
      const res = await poolList(newObj)
      if (!res.code) {
        this.poollist = res.data.data
      }
    },
    async getList() {
      var newObj = {}
      newObj = { ...this.queryParam, pageNo: this.pageNo, pageSize: this.pageSize }
      this.loading = true
      const res = await poolLog(newObj)
      this.loading = false
      if (!res.code) {
        this.dataSource = res.data.data
        this.totalCount = res.data.totalCount
        this.total_money1 = res.data.total_money1
        this.total_money2 = res.data.total_money2
      }
    },
    async getStatisticList() {
      const res = await poolStatistic()
      if (!res.code) {
        this.statisticLst = res.data
      }
    },
    searchData() {
      this.pageNo = 1
      this.getList()
    },
    tablePageChange(e) {
      this.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getList()
    },
    typechange(e) {
      this.queryParam.type = e.target.value
      this.getList()
    },
    statusChange(e) {
      this.queryParam.status = e.target.value
      this.getList()
    },
    dateChange(date, dateString) {
      this.queryParam.date_time = dateString[0] != '' ? `${dateString[0]}/${dateString[1]}` : ''
      // this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.condition {
  min-width: 330px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.pa10 {
  padding: 10px 5px;
  background-color: #fff;
  margin-bottom: 10px;
}
.statistic {
  width: 12.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #000;
  .money {
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
